<template>
    <div class="Box">
        <img :src="props.cover" class="imgBox"/>
        <div class="info">
            <p>{{ props.title }}</p>
            <p>{{ props.summary }}</p>
        </div>
    </div> 
</template>

<script lang="ts" setup>

interface Props{
    cover:string
    title:string
    summary:string
}
const props = defineProps<Props>()
</script>

<style lang="scss" scoped>
p{
    margin: 0;
    padding: 0;
}
.Box{
    display: flex;
    align-items: start;
    gap: 15px;
    width: 100%;
    height: 100%;
}
.imgBox{
    width: 120px;
    height: 100%;
    border-radius: 4px;
}
.info{
    width: calc(100% - 135px);
    color: #222222;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 15px;
    & p:nth-child(1){
        font-size: 18px;
        width: 100%;
        text-align: left;
    }
    & p:nth-child(2){
        font-size: 12px;
        line-height: 18px;
        max-height: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }
}
</style>